﻿<%@ page language="C#" autoeventwireup="true" inherits="MembershipCard_wechat_web_Products2, App_Web_2j4u444m" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" /> 
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable" /> 
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
<meta content="telephone=no" name="format-detection" />
<link type="text/css" href="css/index.css" rel="stylesheet" />
<title runat="server" id="titie">商城</title>
</head>
<body>
    <form id="form1" runat="server">
   <div class="indexmenu">
    <ul>
       <li><span><a href="javascript:history.go(-1);"><em class="indexicon1"></em></a></span></li>
        <li><span><a href="Products2.aspx"><em class="indexicon2"></em></a></span></li>
         <li><span><a href="shouhuo2.aspx"><em class="indexicon3"></em></a></span></li>
          <li runat="server" id="sumcar"><span><a href="ShopCar2.aspx"><em class="indexicon4"></em></a></span></li>
    </ul>
</div>

<div class="products">
  <strong><img runat="server" id="image1" src="images/product03.jpg" alt="" /></strong>
  <p></p>
</div>
<div class="prososo">
   <ul>
       <li><a href="#"><span>综合</span></a></li>
       <li><a href="#"><span class="jiantou">人气</span></a></li>
       <li><a href="#"><span class="jiantou">销量</span></a></li>
       <li><a href="#" onclick="OrderByPrice()"><span class="jifen">价格</span></a></li>
      <li><a href="javascript:showdd();"><span class="btn">筛选</span></a></li>
   </ul>
</div>
<div class="prolist" runat="server" id="plist">
   <ol>
   <a href="#"><img src="images/prolist1.jpg" alt="" /></a>
   <p>【百年经典名媛秘方  深层滋润肌肤】</p>
   <p>&nbsp;积分：<strong>100分</strong></p>
   </ol>
   <ol>
   <a href="#"><img src="images/prolist2.jpg" alt="" /></a>
   <p>【百年经典名媛秘方  深层滋润肌肤】</p>
   <p>积分：<strong>78分</strong></p>
   <div class="cuxiao">3折</div>
   </ol>
     <ol>
   <a href="#"><img src="images/prolist2.jpg"  alt="" /></a>
   <p>【百年经典名媛秘方  深层滋润肌肤】</p>
   <p>积分：<strong>56分</strong></p>
    <div class="cuxiao">3折</div>
   </ol>
   <ol>
   <a href="#" ><img src="images/prolist1.jpg" alt="" /></a>
   <p>【百年经典名媛秘方  深层滋润肌肤】</p>
   <p>积分：<strong>80分</strong></p>
   </ol>
</div>
<div class="shaixuan" id="shaibox">
  <div class="shaicon">
    <h2 onclick="javascript:hidedd();">商品分类</h2>
    <div><a href="Products2.aspx" style="font-size:18px;"><i class="lefticon"></i>所有产品</a></div>
     <p><em class="lefticon"></em>按类别</p>
      <span>
     <a href="Products2.aspx?top=1" onclick="javascript:hidedd();">当季推荐</a>
        <a href="Products2.aspx?mx=1" onclick="javascript:hidedd();">明星产品</a>
          <a href="Products2.aspx?mx=美妆香氛" onclick="javascript:hidedd();">美妆护肤</a>
           <a href="Products2.aspx?mx=珠宝" onclick="javascript:hidedd();">珠宝</a>
            <a href="Products2.aspx?mx=服饰配件" onclick="javascript:hidedd();">服饰配件</a>
      </span>
      <p><em class="lefticon"></em>按系列</p>
        <span runat="server" id="xl">
      <a href="Products2.aspx?h=海派礼盒系列" onclick="javascript:hidedd();">海派礼盒系列</a>
        <a href="Products2.aspx?h=玉容系列" onclick="javascript:hidedd();">玉容系列</a>
          <a href="Products2.aspx?h=粉嫩系列" onclick="javascript:hidedd();">粉嫩系列</a>
           <a href="Products2.aspx?h=雪白晶润系列" onclick="javascript:hidedd();">雪白晶润系列</a>
            <a href="Products2.aspx?h=海上花系列" onclick="javascript:hidedd();">海上花系列</a>
            <a href="Products2.aspx?h=玲珑保湿系列" onclick="javascript:hidedd();">玲珑保湿系列</a>
          <a href="Products2.aspx?h=夜上海香氛系列" onclick="javascript:hidedd();">夜上海香氛系列</a>
           <a href="Products2.aspx?h=菁纯花露系列" onclick="javascript:hidedd();">菁纯花露系列</a>
            <a href="Products2.aspx?h=花样年华系列" onclick="javascript:hidedd();">花样年华系列</a>
      </span>
      <%-- <p><em class="lefticon"></em>按步骤分类</p>
        <span>
     <a href="#" onclick="javascript:hidedd();">玉容系列</a>
        <a href="#" onclick="javascript:hidedd();">玉容系列</a>
          <a href="#" onclick="javascript:hidedd();">玉容系列</a>
           <a href="#" onclick="javascript:hidedd();">玉容系列</a>
            <a href="#" onclick="javascript:hidedd();">玉容系列</a>
      </span>--%>
       <p><em class="lefticon"></em>按价格</p>
         <span>
     <a href="Products2.aspx?price=1" onclick="javascript:hidedd();">0-800</a>
        <a href="Products2.aspx?price=2" onclick="javascript:hidedd();">801-1200</a>
          <a href="Products2.aspx?price=3" onclick="javascript:hidedd();">1200以上</a>
           <%--<a href="Products2.aspx?price=4" onclick="javascript:hidedd();">1001-2000</a>
            <a href="Products2.aspx?price=5" onclick="javascript:hidedd();">2001-5000</a>
             <a href="Products2.aspx?price=6" onclick="javascript:hidedd();">5000以上</a>--%>
      </span>
         
  </div>
</div>
<asp:Button ID="Button1" class="btn" Width="100%" Style="display: none;" runat="server"
                Text="按价格排序" OnClick="Button1_Click" />
                <input type="hidden" runat="server" id="price" value="ASC" />
    </form>
</body>
</html>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
    window.onload = function () {
        laot('shaibox').style.height = document.body.offsetHeight + 'px';
    }
    function showdd() { startMove(laot('shaibox'), { width: 250 }) }
    function hidedd() { startMove(laot('shaibox'), { width: 0 }) }
    var obp = document.getElementById('shaibox').getElementsByTagName('p');
    var obspan = document.getElementById('shaibox').getElementsByTagName('span');
    var obem = document.getElementById('shaibox').getElementsByTagName('em');
    for (var i = 0; i < obp.length; i++) {
        obp[i].index = i;
        obp[i].flag = true;
        obp[i].onclick = function () {

            if (obp[this.index].flag == true) {

                for (var j = 0; j < obspan.length; j++) {
                    obspan[j].style.display = "none";
                    obem[j].className = "lefticon";
                }
                obspan[this.index].style.display = "block";
                obem[this.index].className = "downicon";
                obp[this.index].flag = false;

            } else {
                obspan[this.index].style.display = "none";
                obem[this.index].className = "lefticon";
                obp[this.index].flag = true;
            }

        }
    }

    function Show(id) {
        location = "ProductsExchange2.aspx?id=" + id;
    }

    function OrderByPrice() {
        var by = document.getElementById("price").value;
        if (by == "ASC")
            document.getElementById("price").value = "DESC";
        else
            document.getElementById("price").value = "ASC";
        document.getElementById("Button1").click();
    }

   // alert("ss");
</script>